// 上面这个代码处理过度动画（默认加上不用管）
document.addEventListener("DOMContentLoaded", () => {
   setTimeout(() => {
      document.body.classList.add("sidenav-pinned")
      document.body.classList.add("ready")
   }, 200)
})

// 每个页面都会导入该js 统一的设置写这里即可
// ------------- toast抽取未方法 -------------
// 变量建议也存到 function的内部
function tip(msg) {
   // 1 保存dom元素
   const toastDom = document.querySelector("#myToast")
   // 2 创建 toast对象 轻提示
   const toast = new bootstrap.Toast(toastDom)
   // 逻辑略
   // 2.5 需要提示信息
   document.querySelector(".toast-body").innerHTML = msg
   // 3 弹出
   toast.show()
}
// tip('（￣︶￣）↗　') // 弹出提示 并显示设置的信息
// 设置基地址
axios.defaults.baseURL = "http://ajax-api.itheima.net"

// ------------- 测试请求拦截器 -------------
// 添加请求拦截器
axios.interceptors.request.use(
   function (config) {
      // console.log('请求拦截器中的逻辑执行啦!')
      // console.log('config:', config)
      // 获取到本次请求的设置 设置修改,比如修改请求头
      // config.headers.food = 'westblueflower'
      config.headrs.Authorization = localStorage.getItem("usertoken")
      // 可以不可以把token的携带 也写在这里呢?
      // 在发送请求之前做些什么
      return response.data
   },
   function (error) {
      // 对请求错误做些什么
      return Promise.reject(error)
   }
)

// 添加响应拦截器
axios.interceptors.response.use(
   function (response) {
      // 2xx 范围内的状态码都会触发该函数。
      console.log("响应拦截器-成功部分的逻辑")
      console.log("response:", response)
      // 人为的将 axios 包裹到数据上的 data属性 点掉
      // 页面中 就不需要点2次data
      // 对响应数据做点什么
      return response
   },
   function (error) {
      // 超出 2xx 范围的状态码都会触发该函数。
      console.log("响应拦截器-异常部分的逻辑")
      // 只要服务器返回的 http状态码是错误 就会执行到这里
      // 可以在这里对于请求的异常 统一判断,比如 token有问题
      if (error.response.status === 401) {
         localStorage.removeItem("usertoken")
         localStorage.removeItem("username")
         //  登录页
         window.location.herf = "../login.html"
      }
      // 对响应错误做点什么
      return Promise.reject(error)
   }
)

// ------------- 获取+设置用户名 -------------
const username = localStorage.getItem("username")
const nameSpan = document.querySelector("#navbar-main .text-sm")
// console.log('nameSpan:', nameSpan)
// nameSpan存在 再赋值 nameSpan可以获取到 dom元素--布尔值 true
// if (nameSpan !== null) {
if (nameSpan) {
   nameSpan.innerHTML = username
}

// ------------- 用户登出 -------------
const logoutDom = document.querySelector("#logout")
// if判断实现
// if (logoutDom) {
//   logoutDom.onclick = function () {
//     // 删除保存的用户名 和 token
//     localStorage.removeItem('username')
//     localStorage.removeItem('usertoken')
//     // 去登录页 js中 ./无法出现login.html
//     // 相对路径 以 js文件最终导入的页面为准
//     window.location.href = './login.html'
//   }
// }
// 表达式1 为真 才会解析表达式2
// dom元素存在 才会去绑定事件
console.log("logoutDom:", logoutDom)
logoutDom &&
   (logoutDom.onclick = function () {
      // 删除保存的用户名 和 token
      localStorage.removeItem("username")
      localStorage.removeItem("usertoken")
      // 去登录页 js中 ./无法出现login.html
      // 相对路径 以 js文件最终导入的页面为准
      window.location.href = "./login.html"
   })
